/*
 *Flutter中文网
 *(1)基础Widget
Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。

Row、 Column： 这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上
* 创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。

Stack： 取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆
* 叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。

Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration
 , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、
 填充(padding)和应用于其大小的约束(constraints)。
 另外， Container可以使用矩阵在三维空间中对其进行变换。
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//请确保在pubspec.yaml文件中，将flutter的值设置为：
//uses-material-design: true。
//这允许我们可以使用一组预定义Material icons。
//Flutter有一套丰富、强大的基础widget，其中以下是很常用的：
//Text：该 widget 可让创建一个带格式的文本。
//Row、 Column： 这些具有弹性空间的布局类Widget可让您在水平（Row）和
//垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox
//布局模型。
//Stack： 取代线性布局 (译者语：和Android中的LinearLayout相似)，
//Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于
//Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位
//（absolute positioning )布局模型设计的。
//Container： Container 可让您创建矩形视觉元素。
//container 可以装饰为一个BoxDecoration,
//如 background、一个边框、或者一个阴影。
//Container 也可以具有边距（margins）、填充(padding)和
//应用于其大小的约束(constraints)。
//另外， Container可以使用矩阵在三维空间中对其进行变换。

class MyAppBar extends StatelessWidget {
  // Widget子类中的字段往往都会定义为"final"
  final Widget title;

  MyAppBar({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0,
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      decoration: new BoxDecoration(color: Colors.blue),
      //Row是水平方向的线性布局
      child: Row(
        children: <Widget>[
          new IconButton(
            onPressed: null,
            icon: Image.asset(
              "images/imv_back.png",
              width: 10,
              height: 20,
              fit: BoxFit.fill,
            ),
            tooltip: 'Navigetion menu',
          ),
          new Expanded(child: title),
          new IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
            tooltip: 'Search',
          )
        ],
      ),
    );
  }
}

class BaseWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Material 是UI呈现的‘一张纸’
    return Material(
      //Column 是垂直方向的线性布局
      child: Column(
        children: <Widget>[
          MyAppBar(
              title: Text('基础Widget',
                  style: Theme.of(context).primaryTextTheme.subtitle1)),
          Expanded(
              child: Center(
            child: Text(
                'StatelessWidget初始化之后就无法改变，如果想改变，那便需要重新创建，new另一个StatelessWidget进行替换。但StatelessWidget因为是静态的，他没有办法重新创建自己。所以StatefulWidget便提供了这样的机制，通过调用setState((){})标记自身为dirty状态，以等待下一次系统的重绘检查。'),
          ))
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'MyAPp',
    //是否显示debug标签
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primarySwatch: Colors.yellow,
    ),
    home: BaseWidgetDemo(),
  ));
}
